<template>
  <div class="HospitalLevelPriceAnalyze item-analyze">
    <!--    医院级别费用对比分析-->
    <section class="layer">
      <div class="box">
        <div class="box-header">
          <span class="box-title">查询条件</span>
        </div>
        <div class="box-body">
          <el-form ref="searchForm" :model="searchForm" label-width="90px">
            <el-row :gutter="12">
              <el-col :md="12" :lg="12" :xl="12">
                <el-form-item label="医疗机构级别" prop="medinsLv">
                  <el-select v-model="searchForm.medinsLv" clearable style="width: 100%;" placeholder="请选择">
                    <el-option v-for="item in levelOptions" :key="item.dictValue" :label="item.dictValue" :value="item.dictCode" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="12" :xl="12">
                <el-form-item label="对比医疗机构" prop="hospCodeList">
                  <el-select v-model="searchForm.hospCodeList" multiple :multiple-limit="10" style="width: 100%;" placeholder="请选择">
                    <el-option v-for="item in hospitalOptions" :key="item.AKB020" :label="item.AKB021" :value="item.AKB020" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="12" :xl="12">
                <el-form-item label="就诊类型" prop="mdtrtType">
                  <el-select v-model="searchForm.mdtrtType" clearable style="width: 100%;" placeholder="请选择" @change="typeSelectChange">
                    <el-option v-for="item in typeOptions" :key="item.dictValue" :label="item.dictValue" :value="item.dictCode" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="12" :xl="12">
                <el-form-item label="二级待遇类型" prop="scdTrtType">
                  <el-select v-model="searchForm.scdTrtType" clearable style="width: 100%;" placeholder="请选择">
                    <!--                    就诊类型选择门特-->
                    <template v-if="searchForm.mdtrtType == '3'">
                      <el-option v-for="item in secondSpecialTypeOptions" :key="item.opspTrtName" :label="item.opspTrtName" :value="item.opspTrtCode" />
                    </template>
                    <template v-else>
                      <el-option v-for="item in secondTypeOptions" :key="item.dictValue" :label="item.dictValue" :value="item.dictCode" />
                    </template>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="18" :lg="18" :xl="18">
                <el-form-item label="费用时间" prop="priceTime" class="clearmargin">
                  <price-time ref="priceTime" :show-default-date="true" :show-btn-select="true" @change="priceTimeChange" />
                </el-form-item>
              </el-col>
              <el-col :md="6" :lg="6" :xl="6">
                <el-button size="small" type="primary" @click="restSearch('searchForm')">重置</el-button>
                <el-button size="small" type="primary" @click="search">查询</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </section>
    <section class="layer ts3">
      <div class="box">
        <div class="box-header">
          <span class="box-title">同类型医院医疗总费用、记账费用对比</span>
        </div>
        <div class="box-body">
          <my-charts v-if="chartShow" id="hosiptial-level-price-analyze" :options="chartOption" width="100%" :height="chartHeight" />
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import PrcieTime from '../components/PriceTime'
import MyCharts from '@/components/MyCharts/index'
import { toolbox } from '@/components/MyCharts/toolbox'
import { getContrastMedicalInstitution } from '../../../api/assist-decision/common'
import { specialSecondType, queryComparisonMedSumfeeReimFee } from '../../../api/assist-decision/hospitalLevelPriceAnalyze'

export default {
  name: '',
  components: {
    'price-time': PrcieTime,
    'my-charts': MyCharts
  },
  mixins: [],
  props: {},
  data() {
    return {
      chartShow: false,
      // dataBar: [
      //   { name: '药品一', value: 22 },
      //   { name: '药品二', value: 33 },
      //   { name: '药品三', value: 86 },
      //   { name: '药品四', value: 53 },
      //   { name: '药品五', value: 31 },
      //   { name: '药品六', value: 64 },
      //   { name: '药品七', value: 92 },
      //   { name: '药品八', value: 47 },
      //   { name: '药品九', value: 49 },
      //   { name: '药品十', value: 57 }
      // ],
      secondTypeOptions: [],
      secondSpecialTypeOptions: [], //  门特二级待遇类型选项列表
      hospitalOptions: [],
      searchForm: {
        mdtrtType: null, //  就诊类型
        medinsLv: null, //  医疗机构级别
        hospCodeList: null,
        scdTrtType: null, //  二级待遇类型
        beginDate: null,
        endDate: null
      },
      chartHeight: window.innerHeight - 360 + 'px',
      chartOption: {
        tooltip: {
          trigger: 'axis'
        },
        toolbox: toolbox('医院'),
        legend: {
          data: ['记账费用', '医疗总费用']
        },
        grid: { left: '3%', right: '4%', bottom: '3%', top: '6%', containLabel: true },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: { alignWithLabel: true }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '%'
          }
        ],
        series: [
          {
            name: '记账费用',
            type: 'bar',
            barWidth: '20%',
            color: 'rgb(104,196,229)',
            data: [],
            markLine: {
              data: [
                { type: 'average' }
              ]
            }
          },
          {
            name: '医疗总费用',
            type: 'bar',
            barWidth: '20%',
            color: 'rgb(84,152,214)',
            data: [],
            markLine: {
              data: [
                { type: 'average' }
              ]
            }
          }
        ]
      }
    }
  },
  computed: {
    typeOptions: function() {
      return this.$store.getters.selectMaps.MDTRT_TYPE
    },
    levelOptions: function() {
      return this.$store.getters.selectMaps.MEDINS_LV
    },
    baseSecondTypeOptions: function() {
      return this.$store.getters.selectMaps.SCD_TRT_TYPE
    }
  },
  watch: {},
  created() {
    this.getContrastMedicalInstitution()
  },
  mounted() {
  },
  methods: {
    getContrastMedicalInstitution() {
      getContrastMedicalInstitution().then(res => {
        this.hospitalOptions = res.data
      })
    },
    priceTimeChange(v) {
      this.searchForm.beginDate = v[0] || null
      this.searchForm.endDate = v[1] || null
    },
    //  就诊类型选项改变
    typeSelectChange(v) {
      this.searchForm.scdTrtType = null
      if (v === '1') {
        this.secondTypeOptions = this.baseSecondTypeOptions.slice(0, 3)
      } else if (v === '2') {
        this.secondTypeOptions = this.baseSecondTypeOptions.slice(3, 6)
      } else if (v === '3') {
        this.getSpecialSecondType()
      }
    },
    //  获取门特二级待遇分类
    getSpecialSecondType() {
      specialSecondType().then(res => {
        this.secondSpecialTypeOptions = res.data
      })
    },
    restSearch(formName) {
      this.$refs.priceTime.reset() // 子组件重置
      this.$refs[formName].resetFields()
    },
    search() {
      this.getData()
    },
    getData() {
      queryComparisonMedSumfeeReimFee(this.searchForm).then(res => {
        this.chartOption.xAxis[0].data = res.data.map(item => {
          return item.hospName
        })
        this.chartOption.series[0].data = res.data.map(item => {
          return item.curpReimSumfee
        })
        this.chartOption.series[1].data = res.data.map(item => {
          return item.curpMedSumfee
        })
        this.chartShow = true
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>
